<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
    </script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(p,i) of products">
            {{i+1}} | ￥{{p.price.toFixed(2)}} |
            {{p.count}} |{{p.price*p.count}}元
        </li>
    </ul>
    <h2>总价:{{total.toFixed(2)}}</h2>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            products: [
                {price: 10, count: 3},
                {price: 15, count: 1},
                {price: 12, count: 2}
            ]
        },
        computed: {
            total() {
                var sum = 0;
                for (var p of this.products) {
                    sum += p.price * p.count;

                }
                return sum;
            }
        },
        methods: {
            getToal() {

            }
        }
    })
</script>
</body>
</html>